<template>
  <div class="goods-details">
    <div class="goods" v-for="(item, index) in goods" @click="router({path: 'goodsDetails', query:{goodsId: item.id}})">
      <img class="info-img" v-if="item.img" :src="item.img">
      <div class="info-p">
        <p class="title">{{item.title}}</p>
        <p class="price">￥{{item.price}}</p>  
      </div>
    </div>
  </div>
</template>

<script>

import { getGoodsList } from '@/api/api'

export default {
  components: {
  },
  data () {
    return {
      num: 1,
      goods: {},
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    jian () {
      if(this.num <= 1) {
        return 
      }
      this.num--
    },
    jia () {
      this.num++
    },
    getGoodsList () {
      getGoodsList().then((res) => {
        this.goods = res.data.info
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .goods-details
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    padding-bottom 5rem
    box-sizing border-box
    .goods
      margin-bottom 1rem
      &:last-child
        margin-bottom 0
      .info-p
        background-color #fff
        padding 2rem 1.5rem
        .title
          line-height 2.4rem
          font-size 1.5rem
          color #333
          font-weight bold
        .price
          color #FF659B
          font-weight bold
          font-size 1.7rem
          margin-top 1rem
</style>